@use "../../variables" as *;

.svc-designer-header .sd-container-modern__title {
  gap: 0;
  column-gap: var(--lbr-header-gap, var(--lbr-spacing-x4));
}

.svc-logo-image {
  position: relative;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  padding: 0;
  cursor: pointer;

  .sd-logo__image {
    max-width: 100%;
  }
}

.svc-logo-image__loading {
  width: var(--ctr-survey-header-logo-loading-width, var(--lbr-size-x6));
  height: var(--ctr-survey-header-logo-loading-height, var(--lbr-size-x6));
  padding: var(--ctr-survey-header-logo-loading-margin-top, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-loading-margin-right, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-loading-margin-bottom, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-loading-margin-left, var(--lbr-spacing-x1));
  box-sizing: content-box;
  margin-left: var(--ctr-survey-header-logo-placeholder-margin-left-advanced, var(--lbr-spacing-x2n));
}

.svc-logo-image-placeholder {
  @include ctrLargeFont;
  opacity: var(--ctr-survey-header-logo-placeholder-icon-opacity, 0.5);
  white-space: nowrap;
  word-break: keep-all;
  padding: var(--ctr-survey-header-logo-placeholder-padding-top, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-placeholder-padding-right, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-placeholder-padding-bottom, var(--lbr-spacing-x1))
    var(--ctr-survey-header-logo-placeholder-padding-left, var(--lbr-spacing-x1));
  margin-inline-start: var(--ctr-survey-header-logo-placeholder-margin-left-advanced, var(--lbr-spacing-x2n));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--ctr-survey-header-logo-placeholder-corner-radius, var(--lbr-corner-radius-round));
  transition: background-color $creator-transition-duration, opacity $creator-transition-duration;

  &:hover {
    background-color: var(--ctr-survey-header-logo-placeholder-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
    opacity: unset;

    use {
      fill: var(--ctr-survey-header-logo-placeholder-icon-color-hovered, var(--sjs-primary-background-500, #19b394ff));
    }
  }

  svg {
    width: var(--ctr-survey-header-logo-placeholder-icon-width, var(--lbr-size-x6));
    height: var(--ctr-survey-header-logo-placeholder-icon-height, var(--lbr-size-x6));
  }
}

.svc-logo-image-placeholder use {
  transition: fill $creator-transition-duration;
  fill: var(--ctr-survey-header-logo-placeholder-icon-color, var(--sjs-layer-3-foreground-50, #00000080));
}

.svc-logo-image-container {
  position: relative;
  cursor: default;
  padding: var(--ctr-survey-header-logo-margin-top-advanced, var(--lbr-spacing-x2)) 0px
    var(--ctr-survey-header-logo-margin-right-advanced, var(--lbr-spacing-x2)) 0px;

  .sd-logo .sd-logo__image {
    margin: 0;
  }
}

.svc-logo-image-controls {
  opacity: 0;
  width: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svc-logo-image-container:not(.svc-logo-image-container--editable) {
  .svc-logo-image-controls {
    display: none;
  }
}

.svc-logo-image-container--editable:focus-within,
.svc-logo-image-container--editable:hover {
  .svc-logo-image-controls {
    opacity: 1;
  }
}